<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
    <script>
        //背景：Promise完美的解决了es6之前异步回调地狱的问题，但是它本质上还是使用的回调的形式(链式)，它的可读性和维护行有了很大提高

        // 在普通函数function前面加上async关键字，声明该函数是一个异步函数
        // 在async函数内部异步请求（Promise对象）前加上await关键字，代表着要等待后面异步代码的执行结果获取后再执行下面的代码，此时可以声明一个变量来接受异步代码的结果
        // 使用await关键字代表着是一定要等待回去到后面异步代码的执行结果后再执行下面的代码，所以通过async/await完美的控制异步顺序的问题
        // async关键字代表后面的函数包含异步操作，
        //async和await是一对很好的cp，await关键字必须在async函数里面写，并且要离得近

        // async原因
        // function p() {
        //     return new Promise((resolve,reject) => resolve('成功的数据'))
        // }
        // async function fn(){
        //     const res = await p()
        //     console.log(res);
        // }
        // fn()


        // async function fn() {
        //     const {data: {content: content1}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        //     console.log(content1)
        //     const {data: {content: content2}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        //     console.log(content2)
        //     const {data: {content: content3}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        //     console.log(content3)
        //  }
        //  fn()

        
        function fetchData(){
            return axios.get('https://api.uomg.com/api/rand.qinghua?format=json')

        }
        async function fn() {
            const{data:{content:content1}} = await fetchData()
            console.log(content1);
            const{data:{content:content2}} = await fetchData()
            console.log(content2);
            const{data:{content:content3}} = await fetchData()
            console.log(content3);
        }
        fn()

        //在全局作用域里不能直接使用await，所以通常的做法是声明一个function，前面是

        //async/await是一个终极 的异步解决方案，他不能取代Promise
        //async/await是必须要写在一起，async给函数声明成异步的，await后面的接的Promise对象，两者必须要紧挨着
        //async/

    </script>
</body>
</html>